<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>DashboardKit Bootstrap 5 Admin Template</title>
    <!-- HTML5 Shim and Respond.js IE11 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 11]>


    <![endif]-->
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="DashboardKit is made using Bootstrap 5 design framework. Download the free admin template & use it for your project.">
    <meta name="keywords" content="DashboardKit, Dashboard Kit, Dashboard UI Kit, Bootstrap 5, Admin Template, Admin Dashboard, CRM, CMS, Free Bootstrap Admin Template">
    <meta name="author" content="DashboardKit ">


    <!-- Favicon icon -->


    <!-- font css -->
    <link rel="stylesheet" th:href="@{/css/feather.css}">
    <link rel="stylesheet" th:href="@{/css/fontawesome.css}">
    <link rel="stylesheet" th:href="@{/css/material.css}">

    <!-- vendor css -->
    <link rel="stylesheet"th:href="@{/css/style.css}" id="main-style-link">

    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GCXtETBl6WVjtVrEp1fGGHfBwxanu3W6"></script>
    <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
    <style type="text/css">
        #mapcontainer {
            width: 100%;
            height: 700px;
            overflow:auto;
            margin: 0;
            font-family: "微软雅黑";
        }
        #tracecontainer {
            width: 100%;
            height: 700px;
            overflow:auto;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
</head>
<body class="">
<!-- [ Pre-loader ] start -->
<div class="loader-bg">
    <div class="loader-track">
        <div class="loader-fill"></div>
    </div>
</div>
<!-- [ Pre-loader ] End -->
<!-- [ Mobile header ] start -->
<div class="pc-mob-header pc-header">
    <div class="pcm-logo">
        <img src="../static/picture/logo.svg" alt="" class="logo logo-lg">
    </div>
    <div class="pcm-toolbar">
        <a href="#!" class="pc-head-link" id="mobile-collapse">
            <div class="hamburger hamburger--arrowturn">
                <div class="hamburger-box">
                    <div class="hamburger-inner"></div>
                </div>
            </div>
        </a>
        <a href="#!" class="pc-head-link" id="headerdrp-collapse">
            <i data-feather="align-right"></i>
        </a>
        <a href="#!" class="pc-head-link" id="header-collapse">
            <i data-feather="more-vertical"></i>
        </a>
    </div>
</div>
<!-- [ navigation menu ] start -->
<nav class="pc-sidebar ">
    <div class="navbar-wrapper">
        <div class="m-header">
            <a href="index.html" class="b-brand">
                <!-- ========   change your logo hear   ============ -->
                <img src="../static/picture/logo.svg" alt="" class="logo logo-lg">
                <img src="../static/picture/logo-sm.svg" alt="" class="logo logo-sm">
            </a>
        </div>
        <div class="navbar-content">
            <ul class="pc-navbar">
                <li class="pc-item pc-caption">
                    <label>Navigation</label>
                </li>
                <li class="pc-item">
                    <a class="pc-link "><span class="pc-micon"><i class="material-icons-two-tone">home</i></span><span class="pc-mtext">学生列表</span></a>
                </li>
                <li class="pc-item">
                    <a th:href="@{/add}" class="pc-link "><span class="pc-micon"><i class="material-icons-two-tone">business_center</i></span><span class="pc-mtext">添加/批量导入学生</span></a>
                </li>
                <li class="pc-item pc-caption">
                    <label>Maps</label>
                    <span>Tones of readymade charts</span>
                </li>
                <li class="pc-item">
                    <a th:href="@{/maps.html}" class="pc-link "><span class="pc-micon"><i class="material-icons-two-tone">my_location</i></span><span class="pc-mtext">常聚区域</span></a>
                </li>

            </ul>
        </div>
    </div>
</nav>
<!-- [ navigation menu ] end -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">修改学生信息</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="sid">ID</label>
                    <input type="text" disabled="disabled" name="sid" class="form-control" id="sid" placeholder="ID">
                </div>
                <div class="form-group">
                    <label for="snumber">学号</label>
                    <input type="text" name="snumber" class="form-control" id="snumber" placeholder="学号">
                </div>
                <div class="form-group">
                    <label for="sname">姓名</label>
                    <input type="text" name="sname" class="form-control" id="sname" placeholder="姓名">
                </div>
                <div class="form-group">
                    <label for="sclassname">班级</label>
                    <input type="text" name="sclassname" class="form-control" id="sclassname" placeholder="班级">
                </div>
                <div class="form-group">
                    <label for="sphone">电话</label>
                    <input type="text" name="sphone" class="form-control" id="sphone" placeholder="电话">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="btn_closemodel" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                <button type="button" onclick="onUpdate()" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade bs-example-modal-lg" id="mapModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="">最新位置信息</h4>
            </div>
            <div id="modal-body" class="modal-body">
                <p>已成功获取学生当前位置</p>
                <div id="mapcontainer">

                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-lg" id="traceModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">48小时行踪信息</h4>
            </div>
            <div id="modal-body1" class="modal-body">
                <p>已成功获取学生当前位置</p>
                <div id="tracecontainer">

                </div>
            </div>
        </div>
    </div>
</div>
<!-- [ Header ] start -->
<header class="pc-header ">
    <div class="header-wrapper">
        <div class="me-auto pc-mob-drp">
            <ul class="list-unstyled">
                <li class="dropdown pc-h-item">
                    <div class="dropdown-menu pc-h-dropdown">
                        <a href="#!" class="dropdown-item">
                            <i class="material-icons-two-tone">account_circle</i>
                            <span>My Account</span>
                        </a>
                        <div class="pc-level-menu">
                            <a href="#!" class="dropdown-item">
                                <i class="material-icons-two-tone">list_alt</i>
                                <span class="float-end"><i data-feather="chevron-right" class="me-0"></i></span>
                                <span>Level2.1</span>
                            </a>
                            <div class="dropdown-menu pc-h-dropdown">
                                <a href="#!" class="dropdown-item">
                                    <i class="fas fa-circle"></i>
                                    <span>My Account</span>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <i class="fas fa-circle"></i>
                                    <span>Settings</span>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <i class="fas fa-circle"></i>
                                    <span>Support</span>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <i class="fas fa-circle"></i>
                                    <span>Lock Screen</span>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <i class="fas fa-circle"></i>
                                    <span>Logout</span>
                                </a>
                            </div>
                        </div>
                        <a href="#!" class="dropdown-item">
                            <i class="material-icons-two-tone">settings</i>
                            <span>Settings</span>
                        </a>
                        <a href="#!" class="dropdown-item">
                            <i class="material-icons-two-tone">support</i>
                            <span>Support</span>
                        </a>
                        <a href="#!" class="dropdown-item">
                            <i class="material-icons-two-tone">https</i>
                            <span>Lock Screen</span>
                        </a>
                        <a href="#!" class="dropdown-item">
                            <i class="material-icons-two-tone">chrome_reader_mode</i>
                            <span>Logout</span>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="ms-auto">
            <ul class="list-unstyled">
                <li class="dropdown pc-h-item">
                    <input type="search" id="searchInput" class="form-control border-0 shadow-none" placeholder="请输入学生学号">
                    <a class="pc-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false" onclick="getStudentByNumber()">
                        <i class="material-icons-two-tone">search</i>
                    </a>
                </li>
                <li class="dropdown pc-h-item">
                    <a class="pc-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                        <span>
								<span class="user-name">学生查询</span>
                        </span>
                    </a>

                </li>
            </ul>
        </div>
    </div>
</header>
<!-- [ Header ] end -->
<!-- [ Main Content ] start -->
<section class="pc-container">
    <div class="pcoded-content">
        <!-- [ breadcrumb ] start -->

        <!-- [ breadcrumb ] end -->
        <!-- [ Main Content ] start -->
        <div class="row">

            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header">
                        <h5>学生管理</h5>
                        <a th:href="@{/exceldown}">
                            导出学生信息
                        </a>
                    </div>
                    </button>
                    <div class="card-body table-border-style">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>学号</th>
                                    <th>姓名</th>
                                    <th>班级</th>
                                    <th>电话</th>
                                    <th>查看位置</th>
                                    <th>48小时内行踪</th>
                                    <th>修改</th>
                                    <th>删除</th>
                                </tr>
                                </thead>
                                <tbody id="students">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- [ Main Content ] end -->
    </div>
</section>
<!-- [ Main Content ] end -->
<!-- Warning Section start -->
<!-- Older IE warning message -->
<!--[if lt IE 11]>
<div class="ie-warning">
    <p>You are using an outdated version of Internet Explorer, please upgrade
        <br/>to any of the following web browsers to access this website.
    </p>
    <div class="iew-container">
        <ul class="iew-download">
            <li>
                <a href="http://www.google.com/chrome/">
                    <img src="assets/images/browser/chrome.png" alt="Chrome">
                    <div>Chrome</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/images/browser/firefox.png" alt="Firefox">
                    <div>Firefox</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/images/browser/opera.png" alt="Opera">
                    <div>Opera</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/images/browser/safari.png" alt="Safari">
                    <div>Safari</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/images/browser/ie.png" alt="">
                    <div>IE (11 & above)</div>
                </a>
            </li>
        </ul>
    </div>
    <p>Sorry for the inconvenience!</p>
</div>
<![endif]-->
<!-- Warning Section Ends -->
<!-- Required Js -->
<script th:src="@{/js/vendor-all.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/pcoded.js}"></script>
<script th:src="@{/js/feather.min.js}"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>

<script>
    var xhttp = new XMLHttpRequest();

    window.onload = function(){
        refresh();
        const closeBtn = document.getElementById('btn_closemodel');
        closeBtn.addEventListener('click',function(){
            $('#myModal').modal('hide');
            return false;
        });
    }

    function refresh() {
        xhttp.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                procQueryResponse(this.responseText);
            }
        };
        xhttp.open("GET","/queryStudentList",true);
        xhttp.setRequestHeader('Accept','application/json');
        xhttp.send();
    }
    function getStudentByNumber() {
        const iptNumber = document.getElementById('searchInput');
        xhttp.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                procQueryResponse(this.responseText);
            }
        };
        xhttp.open("GET","/queryStudentByNumber?number="+iptNumber.value,true);
        xhttp.setRequestHeader('Accept','application/json');
        xhttp.send();
    }
    function getStudentPositionByNumber(number) {
        xhttp.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                const obj = JSON.parse(this.responseText);
                if(obj.success){
                    for(let studentposition of obj.data){
                        $('#mapModel').modal('show');
                        setTimeout(function () {
                            var map = new BMapGL.Map('mapcontainer');
                            var point = new BMapGL.Point(studentposition.xpoint,studentposition.ypoint);
                            map.centerAndZoom(point, 15);
                            //滚轮缩放地图
                            map.enableScrollWheelZoom(true);
                            // 创建点标记
                            var marker = new BMapGL.Marker(point);
                            map.addOverlay(marker);
                        },500 );

                    }
                }
            }
        };
        xhttp.open("GET","/queryStudentPosition?number="+number,true);
        xhttp.setRequestHeader('Accept','application/json');
        xhttp.send();
    }
    function getStudentTraceByNumber(number) {
        xhttp.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                const obj = JSON.parse(this.responseText);
                if(obj.success){
                    var len = obj.data.length;
                    var point = [];
                    for (var i = 0; i < len; i++) {
                        let studentposition = obj.data[i];
                        point.push(new BMapGL.Point(studentposition.xpoint, studentposition.ypoint));
                    }
                    $('#traceModel').modal('show');
                    setTimeout(function () {
                        var map = new BMapGL.Map('tracecontainer');
                        map.centerAndZoom(new BMapGL.Point(point[0].lng,point[0].lat), 17);  // 初始化地图,设置中心点坐标和地图级别
                        map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
                        var pl = new BMapGL.Polyline(point);
                        setTimeout(function(){
                            trackAni = new BMapGLLib.TrackAnimation(map, pl, {
                                overallView: true,
                                tilt: 1,//动画播放角度
                                duration: 20000,
                                delay: 300
                            });
                            trackAni.start();
                        }, 3000);
                    },500 );

                }
            }
        };
        xhttp.open("GET","/queryStudent48Trace?number="+number,true);
        xhttp.setRequestHeader('Accept','application/json');
        xhttp.send();
    }
    function procQueryResponse(responseText){
        const obj = JSON.parse(responseText);
        if(obj.success){
            const tblBody = document.getElementById('students');
            tblBody.innerHTML=''
            for(let student of obj.data){
                const tr = document.createElement('tr');
                const td = document.createElement('td');
                td.innerText = student.id;
                const td1 = document.createElement('td');
                td1.innerText = student.number;
                const td2 = document.createElement('td');
                td2.innerText = student.name;
                const td3 = document.createElement('td');
                td3.innerText = student.classname;
                const td4 = document.createElement('td');
                td4.innerText = student.phone;
                const td5 = document.createElement('td');
                const td6 = document.createElement('td');
                const td7 = document.createElement('td');
                const td8 = document.createElement('td');

                const btnMap = document.createElement('button');
                btnMap.type = 'button';
                btnMap.value = '查看位置';
                btnMap.innerHTML='查看位置';
                btnMap.className = 'btn btn-block btn-primary mb-4';
                btnMap.addEventListener('click',function(){
                    getStudentPositionByNumber(student.number);
                    return false;
                });
                const btnTrace = document.createElement('button');
                btnTrace.type = 'button';
                btnTrace.value = '查看48小时行踪';
                btnTrace.innerHTML='查看行踪';
                btnTrace.className = 'btn btn-block btn-primary mb-4';
                btnTrace.addEventListener('click',function(){
                    getStudentTraceByNumber(student.number)
                    return false;
                });

                const iptUpdate = document.createElement('button');
                iptUpdate.type = 'button';
                iptUpdate.value = '修改';
                iptUpdate.innerHTML='修改';
                iptUpdate.className = 'btn btn-block btn-primary mb-4';
                iptUpdate.addEventListener('click',function(){
                    $('#myModal').modal('show');
                    const sid = document.getElementById('sid');
                    sid.value = student.id;
                    const snumber = document.getElementById('snumber');
                    snumber.value = student.number;
                    const sname = document.getElementById('sname');
                    sname.value = student.name;
                    const sclassname = document.getElementById('sclassname');
                    sclassname.value = student.classname;
                    const sphone = document.getElementById('sphone');
                    sphone.value = student.phone;
                    return false;
                });

                const iptDel = document.createElement('input');
                iptDel.type = 'button';
                iptDel.value = '删除';
                iptDel.innerHTML='删除';
                iptDel.className = 'btn btn-block btn-primary mb-4';
                iptDel.addEventListener('click',function(){
                    deleteStudent(student);
                    return false;
                });
                td5.appendChild(btnMap);
                td6.appendChild(btnTrace);
                td7.appendChild(iptUpdate);
                td8.appendChild(iptDel);
                tr.appendChild(td);
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
                tr.appendChild(td5);
                tr.appendChild(td6);
                tr.appendChild(td7);
                tr.appendChild(td8);
                tblBody.appendChild(tr);
            }
        }
    }

    function deleteStudent(student) {
        console.log('删除中....');
        console.log(student);
        xhttp.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                const obj = JSON.parse(this.responseText);
                if(obj.success){
                    alert('删除成功！');
                    refresh();
                }else{
                    alert('删除失败！'+obj.data);
                }
            }
        }
        xhttp.open("POST","/deleteStudent?id="+student.id,true);
        xhttp.setRequestHeader('Accept','application/json');
        xhttp.send()
    }

    function onUpdate(){
        const iptId = document.getElementById('sid');
        const iptNumber = document.getElementById('snumber');
        const iptName = document.getElementById('sname');
        const iptClassName = document.getElementById('sclassname');
        const iptPhone = document.getElementById('sphone');
        xhttp.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                const obj = JSON.parse(this.responseText);
                if(obj.success){
                    alert('更新成功！');
                    refresh();
                }else{
                    alert('更新失败！'+obj.data);
                }
            }
        }
        xhttp.open("PUT","/updateStudent?id="+iptId.value+"&number=" +iptNumber.value+"&name=" + iptName.value + '&classname=' + iptClassName.value + '&phone='+iptPhone.value,true);
        xhttp.setRequestHeader('Accept','application/json');
        xhttp.send()
    }
</script>
</html>
